<template>
<div class="app">
  <div class="tabs">
    <template v-for="(item,index) in tabs" :key="item">
      <button :class="{active:currentTab===item}"
      @click="itemClick(item)">
        {{item}}
      </button>
    </template>
  </div>

  <div class="view">
    <keep-alive include="about,category,home">
      <component :is="currentTab">
      </component>
    </keep-alive>

  </div>

</div>
</template>

<script>
import {defineAsyncComponent} from 'vue'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Category from "./views/Category.vue";
// const AsyncCateGory = defineAsyncComponent(()=>import("./views/Category.vue"))
export default{
  components:{
    Home,
    About,
    Category
    // Category:AsyncCateGory
  },
  data(){
    return{
      tabs:['home','about','category'],
      // currentIndex:0
      currentTab:'home'
    }
  },
  methods:{
    itemClick(item){
      this.currentTab=item
      console.log(item)
    },
    homeClick(payload){
      console.log("homeClick",payload)
    }
  }
}
</script>

<style scoped>
.active{
  color: red;
}
</style>